<template>
	<view class="module-wrap">
		<view class="back-wrap">
			<view class="text-bold mb-20">{{ info.phone }}</view>
			<!-- <view class="text-bold mb-20">{{ privacyPhone(info.phone) }}</view> -->
			<slot name="time">
				<view>有效期：永久</view>
			</slot>
		</view>
		<view class="qrcode-wrap" :style="{ top }">
			<slot name="title"></slot>
			<slot name="store">
				<view class="qrcode-wrap_site fs-30 text-sub">{{ info.store.name }}</view>
			</slot>
			<!-- <view class="qrcode-wrap_site fs-28 text-sub">{{ info.community.title }}</view> -->
			<view class="qrcode-wrap_qrcode">
				<view class="flex-center-center" v-if="noAuth">
					<cl-image
						src="/static/img/no-auth.png"
						:defaultHost="false"
						:size="200"
						mode="scaleToFill"
					></cl-image>
				</view>
				<canvas id="qrcode" canvas-id="qrcode" style="width: 140px; height: 140px"></canvas>
			</view>
			<view class="qrcode-wrap_prompt mt-30 fs-24 text-sub">出示上方二维码，扫码入场</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, defineComponent } from "vue";
import { onReady } from "@dcloudio/uni-app";
import UQRCode from "/@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js";

import { privacyPhone } from "/@/utils";

const props = defineProps({
	info: {
		type: Object,
		default: () => {},
	},
	top: {
		type: String,
		default: "180rpx",
	},
});

const noAuth = ref<boolean>(false)
function openNoAuth() {
	noAuth.value = true
}

const drawQrcode = (qrLink: any) => {
	// 获取uQRCode实例
	var qr: any = new UQRCode();
	// 设置二维码内容
	qr.data = qrLink;

	// 设置二维码大小，必须与canvas设置的宽高一致
	qr.size = 140;
	// 调用制作二维码方法
	qr.make();
	// 获取canvas上下文
	var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
	// 设置uQRCode实例的canvas上下文
	qr.canvasContext = canvasContext;
	// 调用绘制方法将二维码图案绘制到canvas上
	qr.drawCanvas();
	noAuth.value = false
};

defineExpose({
	drawQrcode,
	openNoAuth,
});
</script>

<style lang="scss" scoped>
.module-wrap {
	position: relative;
	width: 100%;
	.back-wrap {
		width: 100%;
		height: 300rpx;
		padding: 30rpx 80rpx;
		color: #fff;
		font-size: 30rpx;
		background-color: $primary;
	}
	.qrcode-wrap {
		position: absolute;
		left: 60rpx;
		right: 60rpx;
		height: 700rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 40rpx 20rpx 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		&_title {
			// margin-bottom: 60rpx;
		}
		&_site {
		}
		&_qrcode {
			position: absolute;
			top: 260rpx;
		}
		&_prompt {
			position: absolute;
			top: 540rpx;
		}
	}
}
</style>
